<template>
	<view>
		<!-- 搜索 -->
		<view class="cu-bar search">
			<view class="search-form round">
				<u-icon name="search" class="margin-lr-sm" color="#E8E8E8" size="28"></u-icon>
				<input :adjust-position="false" type="text" v-model="keywords" placeholder-class="plc" placeholder="搜索你想要的商品" confirm-type="search" @click="$goto('/pages/shop/search')"></input>
			</view>
		</view>

		<!-- 轮播 -->
		<view class="bg-img" style="background-image: url(../../static/images/tb1.png);height: 200rpx;background-size: 100% 100%;"></view>

		<view class="padding-lr" style="margin-top: -160rpx;">
			<swiper class="swiper" indicator-color="rgba(255,255,255,0.8)" indicator-active-color="rgba(255,255,255,1)"
			 :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="i in carousel" :key="i.id">
					<view class="swiper-item" @click="$goto('/pages/shop/goods?id='+i.url)">
						<image :src="i.picture" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 热销商品 -->
		<view class="padding-tb-sm padding-lr bg-white">
			<view class="block-title">
				<view class="title">
					热销商品
				</view>
			</view>

			<view class="three-pic padding-top">
				<view class="bg-img pic" :style="'background-image: url(' + i.picture[0] + ')'" v-for="i in hot" :key="i.id" @click="$goto('/pages/shop/goods?id='+i.id)">
					<view class="tag">
						平台推荐
					</view>
				</view>
			</view>
		</view>

		<!-- 惠民商品 -->
		<view class="padding-tb-sm padding-lr bg-white">
			<view class="block-title">
				<view class="title">
					惠民商品
				</view>
			</view>
		</view>

		<scroll-view scroll-x class="shop-nav nav" scroll-with-animation :scroll-left="scrollLeft">
			<view class="cu-item" :class="i.id==TabCur?'active cur':''" v-for="(i,k) in cate" :key="k" @tap="tabSelect" :data-id="i.id">
				{{i.cate_name}}
			</view>
		</scroll-view>

		<view class="padding-tb-sm padding-lr bg-white">
			<view class="grid col-2 goods">
				<view :class="[ (k%2==0) ? 'left' : 'right' ]" v-for="(i,k) in goods" :key="i.id" @click="$goto('/pages/shop/goods?id='+i.id)">
					<view class="good margin-top">
						<view class="bg-img" :style="'background-image: url(' + i.full_thumbnail + ')'"></view>
						<view class="info padding-xs">
							<view class="title">{{i.goods_name + ' ' + i.goods_attr[0].attr_name}}</view>
							<view class="price padding-tb-xs">
								<view class="cu-tag bg-orange sm margin-right-xs">
									会员价
								</view>
								<view class="text-price text-lg text-red text-cut margin-right-xs">
									{{i.goods_attr[0].attr_price}}
								</view>
								<view class="text-price text-sm text-gray text-cut margin-right-xs old">
									{{i.goods_attr[0].original_price}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- #ifndef H5 -->
			<view class="blank bg-white" style="height: 100rpx;"></view>
			<!-- #endif -->
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keywords: '',
				TabCur: 0,
				scrollLeft: 0,
				carousel: [],
				cate: [],
				hot: [],
				page: 1,
				goods: []
			}
		},
		mounted() {
			this.getData();
			this.getCate();
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				this.page = 1
				this.getGoods();
			},
			getData() {
				this.$u.get('/index/data?position=2').then(res => {
					let data = res.data.result
					
					let { notice, carousel } = data
					this.notice = notice.author + ':' + notice.content
					this.carousel = carousel
				})
			},
			getCate() {
				this.$u.get('/goods/cate').then(res => {
					let data = res.data.result.cate
					this.cate = data
					this.TabCur = data[0].id
					this.getGoods();
					
					this.hot = res.data.result.hot
				})
			},
			getGoods() {
				this.$u.get(`/goods/list?cate=${this.TabCur}&page=${this.page}`).then(res => {
					let data = res.data.result.goods
					if (this.page==1) {
						this.goods = data
					} else {
						this.goods = this.goods.concat(data)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.search {
		background-color: #1f1f1f;
	}
	.cu-bar .search-form {
		background-color: #4B4B4B;
		color: #E8E8E8;
		.plc {
			color: #E8E8E8;
		}
	}
	
	.swiper {
		height: 330rpx;
		position: relative;
		z-index: 0;

		.swiper-item {
			width: 100%;
			height: 100%;
		}
	}

	.top-nav {
		border-radius: 16rpx;
		box-shadow: 4rpx 4rpx 4rpx #F1F0F0, -4rpx 4rpx 4rpx #F1F0F0;
		position: relative;
		z-index: 1;

		.nav {
			&.on {
				background-color: #F5F5F5;
			}
		}
	}

	.shop-nav {
		background-color: #F4F4F4;

		.active {
			color: #2D2D2D;
			font-weight: bold;
		}
	}

	.goods {
		.left {
			padding-right: 15rpx;
		}

		.right {
			padding-left: 15rpx;
		}

		.good {
			border: 1px solid #F3F3F3;

			.bg-img {
				width: 100%;
				padding-bottom: 100%;
			}

			.title {
				display: -webkit-box;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.info {
				height: 150rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: column;

				.price {
					display: flex;
					align-items: center;

					.cu-tag {
						padding: 8rpx !important;
						font-size: 18rpx;
						height: 32rpx;
					}

					.old {
						text-decoration: line-through;
					}
				}
			}
		}
	}

	.three-btn {
		.btn {
			width: 210rpx;
			padding: 26rpx 16rpx;
			border-radius: 16rpx;
			border: 1rpx solid #DCDBDC;
			display: flex;
			justify-content: space-around;
			align-items: center;
			box-shadow: 1rpx 1rpx 1rpx #F5EEE2, -1rpx -1rpx 1rpx #F5EEE2;

			.img {
				width: 40rpx;
				height: 40rpx;
				filter: drop-shadow(0rpx 16rpx 8rpx #DEDDDD);
			}
		}
	}

	.three-pic {
		display: flex;
		justify-content: space-between;

		.pic {
			position: relative;
			width: 220rpx;
			height: 320rpx;
			border-radius: 20rpx;

			.tag {
				color: #fff;
				display: inline-block;
				position: absolute;
				left: 0;
				bottom: 30rpx;
				font-size: 24rpx;
				padding: 8rpx 16rpx;
				letter-spacing: 2rpx;
				background-color: rgba(59, 65, 76, 0.5);
			}
		}
	}

	.block-title {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.title {
			color: black;
			font-size: 32rpx;
			font-weight: bold;
			letter-spacing: 4rpx;
		}

		.more {
			color: #B9B9B9;
		}
	}
</style>
